<template>
    <video 
        style="width: 100%;"
        id="player-container-id" 
        width="400" 
        height="400" 
        preload="auto" 
        playsinline webkit-playsinline>
    </video>
    <button @click="show()" style=" width: 100%;">加载</button>
       <textarea style="padding:0; width: 100%;" v-model="src"/>
</template>

<script>
    import {ref, reactive } from "vue"
    export default {
      name: 'VideoM3u8Player',
      components: {
        },
        setup(){
          let src = ref("https://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8")
          let player = reactive({})
          return{
            src,player
          }
        },
        mounted(){
          this.player = TCPlayer('player-container-id', {}) // player-container-id 为播放器容器 ID，必须与 html 中一致
          this.player.src(this.src) // url 播放地址
        },
      methods: {
        show() {
          this.player.src(this.src)
        }
      }
    }
</script>
<style>

</style>